<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
    <script type="text/javascript" src="js/lib/jquery.min.js"></script>
    <link rel="stylesheet" href="fonts/iconfont.css">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet/less" type="text/css" href="css/xStyle.less"/>
    <script type="text/javascript" src="js/lib/less.js"></script>
	</head>
	<body>
		<div id ="xxx1"></div>
	</body>
<script type="module">
	import xCube from "./js/src/xCube.js";
    import {_data2} from './js/data/cube.js'

    function getData(tuple) {
        let sales = 0;
        let lastSales = 0;
        for (let t of tuple) {
            sales += t.sales;
            lastSales += t.lastSales
        }
        let rate = (sales - lastSales) / lastSales;
        return {sales, lastSales, rate}
    }

    function setStyle(data) {
        if ((data.sales - 0) > 4000)
            return "primary"
        else if ((data.sales - 0) > 3000)
            return "success";
        else return "";
        
    }

    let tmpl = `<img src="{img}"><span type="data">{data}</span>`;

    function renderRate(data, isSum) {
        let rate = 100 * data.rate;
        if (data.rate < 0.03)
            return tmpl.replace("{img}", "./img/raise-down.png").replace("{data}", rate.toFixed(2) + '%');
        else
            return tmpl.replace("{img}", "./img/raise-up.png").replace("{data}", rate.toFixed(2) + '%');

    }

    let cfg = {
        el: "xxx1",
        style:"cube sm",
        data: _data2,
        keysY: [{$code: "Quarter", title: "季度", width: "100px",filter:true},
         {$code: "cityCode", $name: "cityName", title: "地市", width: "100px",filter:true},
            {$code: "regionCode", $name: "regionName", title: "区县", width: "100px",filter:true}
        ],
        keysX: [{$code: "color", $name: "colorName", title: "颜色", width: "100px",filter:true},
            {$code: "size", $name: "sizeName", title: "尺寸", width: "100px",filter:true}
        ],
        values: [{
            $data: "sales",
            title: "销售",
            format: "#.0",
            width: "80px",
            align: "right",
            style: setStyle
        },
            {
                $data: "lastSales",
                title: "去年同期",
                format: "#.0",
                width: "80px",
                align: "right"

            },

            {
                type: "callback",
                callback: renderRate,
                title: "增长率",
                width: "120px",
                align: "right"
            }

        ],
        callback: getData,
        valuesOn:'X'
    }

    new xCube(cfg).init();

</script>


</html>
